<template>
  <div class="box">
    <el-card style="margin-top: 25px" shadow="never" class="box-card box-card1">
      <div slot="header" class="clearfix">
        <span>订单信息: </span>
        <el-tag :type="datalist.status | status">{{
          datalist.status | orderProcessText
        }}</el-tag>
        <el-button
          size="small"
          @click="toOrderInfo"
          style="margin-left: 20px"
          type="primary"
          >查看订单详细</el-button
        >
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="6"
            >订单编号:
            {{ datalist.orderSn ? datalist.orderSn : "暂无订单编号" }}</el-col
          >
          <el-col :span="6">退款人姓名: {{ datalist.returnName }}</el-col>
          <el-col :span="6"
            >退单理由:
            {{
              datalist.reason ? datalist.reason : "用户未填写退单理由"
            }}</el-col
          >
          <el-col :span="6"
            >退单描述:
            {{
              datalist.description ? datalist.description : "用户未填写退单描述"
            }}</el-col
          >
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="24">申请时间: {{ datalist.createTime }}</el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="6">退单图片: </el-col>
          <!-- <el-col :span="18"
            ><img
              v-for="(item, index) in JSON.parse(datalist.proofPics)"
              :key="index"
              :src="item"
              alt=""
          /></el-col> -->
        </el-row>
      </div>
    </el-card>
    <el-card
      style="border: 1px solid #fff; margin-top: 25px"
      shadow="never"
      class="box-card"
    >
      <div slot="header" class="clearfix">
        <span>退货商品</span>
      </div>
      <div class="text item">
        <template>
          <el-table :data="tablelist" border style="width: 100%">
            <el-table-column align="center" prop="date" label="商品图片">
              <template slot-scope="scope">
                <img
                  style="width: 150px; height: 150px"
                  :src="scope.row.productPic"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="productName"
              label="商品名称"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="productPrice"
              label="商品价格"
              width="100px"
            >
            </el-table-column>
            <el-table-column align="center" prop="productAttr" label="商品属性">
              <template slot-scope="scope">
                <span
                  v-for="(item, index) in JSON.parse(scope.row.productAttr)"
                  :key="index"
                  > <span style="margin: 0 5px">[ {{ item.key }}{{ item.value }} ]</span> </span
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="productCount"
              label="商品数量"
              width="100px"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="returnAmount"
              label="商品总计"
            >
            </el-table-column>
          </el-table>
        </template></div
    ></el-card>

    <el-card
      style="border: 1px solid #fff; margin-top: 25px"
      shadow="never"
      class="box-card"
    >
      <div slot="header" class="clearfix">
        <span>用户信息</span>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="12">联系人: {{ datalist.returnName }}</el-col>
          <el-col :span="12">联系电话: {{ datalist.returnPhone }}</el-col>
        </el-row>
      </div>
    </el-card>

    <el-card
      v-if="datalist.status != 0"
      style="border: 1px solid #fff; margin-top: 25px"
      shadow="never"
      class="box-card"
    >
      <div slot="header" class="clearfix">
        <span>费用信息</span>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="12">退单金额: {{ datalist.returnAmount }}</el-col>
          <el-col :span="12">退单运费: 0</el-col>
        </el-row>
      </div>
    </el-card>

    <el-card
      style="border: 1px solid #fff; margin-top: 25px"
      shadow="never"
      class="box-card"
      v-if="datalist.status != 0"
    >
      <div slot="header" class="clearfix">
        <span>处理结果</span>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="6">处理人: {{ datalist.handleMan }}</el-col>
          <el-col :span="6">处理备注: {{ datalist.handleNote }}</el-col>
          <el-col :span="6">处理时间: {{ datalist.handleTime }}</el-col>
        </el-row>
      </div>
    </el-card>

    <el-card
      style="border: 1px solid #fff; margin-top: 25px"
      shadow="never"
      class="box-card"
      v-if="datalist.status == 0"
    >
      <div slot="header" class="clearfix">
        <span>退单处理信息</span>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="6"
            >退单处理人:
            <el-input
              style="width: 200px"
              v-model="handle.handleMan"
              placeholder="请输入处理人"
            ></el-input
          ></el-col>
          <el-col :span="6"
            >退单处理备注:
            <el-input
              style="width: 200px"
              v-model="handle.handleNote"
              placeholder="请输入处理备注"
            ></el-input
          ></el-col>
          <el-col :span="6"
            >退单金额:
            <el-input-number
              style="width: 200px"
              v-model="handle.returnAmount"
              label="退单金额"
            ></el-input-number
          ></el-col>
        </el-row>
      </div>
    </el-card>

    <el-card
      style="border: 1px solid #fff; margin-top: 25px"
      shadow="never"
      class="box-card"
      v-if="datalist.status == 2"
    >
      <div slot="header" class="clearfix">
        <span>收货信息</span>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="6">退单收货人: {{ datalist.receiveMan }}</el-col>
          <el-col :span="6">退单收货备注: {{ datalist.receiveNote }}</el-col>
          <el-col :span="6">退单收货时间: {{ datalist.receiveTime }}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-card
      style="border: 1px solid #fff; margin-top: 25px"
      shadow="never"
      class="box-card"
      v-if="datalist.status == 1"
    >
      <div slot="header" class="clearfix">
        <span>收货处理信息</span>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="6"
            >收货处理人:
            <el-input
              style="width: 200px"
              v-model="receive.receiveMan"
              placeholder="请输入处理人"
            ></el-input
          ></el-col>
          <el-col :span="6"
            >收货处理备注:
            <el-input
              style="width: 200px"
              v-model="receive.receiveNote"
              placeholder="请输入处理备注"
            ></el-input
          ></el-col>
        </el-row>
      </div>
    </el-card>
    <el-card
      style="
        border: 1px solid #fff;
        margin: 50px auto;
        text-align: center;
        overflow: hidden;
      "
      shadow="never"
      class="box-card"
      v-if="datalist.status == 0 || datalist.status == 1"
    >
      <div class="text item">
        <el-button
          type="primary"
          @click="agree"
          v-if="datalist.status == 0"
          style="margin-left: 20px; margin: 20px 20px"
          >同意退货</el-button
        >
        <el-button
          type="info"
          @click="refuse"
          v-if="datalist.status == 0"
          style="margin-left: 20px; margin: 20px 20px；"
          >拒绝退货</el-button
        >
        <el-button
          type="primary"
          @click="confirm"
          v-if="datalist.status == 1"
          style="
            margin-left: 20px;
            margin: 20px 20px;
            background: #e6a23c;
            border: 1px solid #e6a23c;
          "
          >确认收货</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import backGoodsApi from "@/api/order/backGoods/index";
export default {
  components: {},

  data() {
    return {
      datalist: {},
      tablelist: [],
      id: "",
      orderId: "",
      orderSn: "",
      handle: {
        handleMan: "",
        handleNote: "",
        returnAmount: "",
      },
      receive: {
        receiveMan: "",
        receiveNote: "",
      },
    };
  },
  filters: {
    orderProcessText(process) {
      var text = "等待处理";
      switch (JSON.stringify(process)) {
        case "0":
          text = "待处理";
          break;
        case "1":
          text = "退货中";
          break;
        case "2":
          text = "已完成";
          break;
        case "3":
          text = "已拒绝";
          break;

        default:
          break;
      }
      return text;
    },
    status(process) {
      var text = "";
      switch (JSON.stringify(process)) {
        case "0":
          text = "danger";
          break;
        case "1":
          text = "warning";
          break;
        case "2":
          text = "";
          break;
        case "3":
          text = "info";
          break;

        default:
          break;
      }
      return text;
    },
  },
  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 查看订单详细
    toOrderInfo() {
      this.$router.push({
        name: "detail",
        query: {
          orderId: this.datalist.orderId,
        },
      });
    },
    agree() {
      backGoodsApi
        .agreeApply(this.id, {
          id: this.id,
          handleMan: this.handle.handleMan,
          handleNote: this.handle.handleNote,
          returnAmount: this.handle.returnAmount,
        })
        .then((res) => {
          if (res.success) {
            this.$message.success("同意退货成功");
            this.tablelist = [];
            this.init();
            this.handle = {
              handleMan: "",
              handleNote: "",
              returnAmount: "",
            };
          } else {
            this.$message.error(res.message);
          }
        });
    },
    refuse() {
      backGoodsApi
        .rejectApply(this.id, {
          id: this.id,
          handleMan: this.handle.handleMan,
          handleNote: this.handle.handleNote,
        })
        .then((res) => {
          if (res.success) {
            this.$message.success("拒绝退货成功");
            this.handle = {
              handleMan: "",
              handleNote: "",
              returnAmount: "",
            };
            this.tablelist = [];
            this.init();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    confirm() {
      backGoodsApi
        .receiveProduct(this.id, {
          id: this.id,
          receiveMan: this.receive.receiveMan,
          receiveNote: this.receive.receiveNote,
        })
        .then((res) => {
          if (res.success) {
            this.$message.success("确认收货成功");
            this.receive = {
              receiveMan: "",
              receiveNote: "",
            };
            this.tablelist = [];
            this.init();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 获取订单信息
    init() {
      this.id = this.$route.query.id;

      console.log(this.id);
      backGoodsApi.orderReturn(this.id).then((res) => {
        console.log(res);
        this.datalist = res.data.orderReturnApply;
        this.tablelist.push(res.data.orderReturnApply);
        this.handle.returnAmount = res.data.orderReturnApply.returnAmount;
        this.orderId = res.data.orderReturnApply.orderId;
        this.orderSn = res.data.orderReturnApply.orderSn;
      });
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 0px auto;
}
.box-card1 {
  width: 97%;
  margin-top: 15px;
}
.box {
  padding-bottom: 40px;
}
</style>